import {Component} from "react";
import {Modal, Provider, Toast} from "@ant-design/react-native";
import {apiDomain, postData} from "../../common/api";
import {Dimensions, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View} from "react-native";
import {observer} from "mobx-react";
import cartStatus from "../../common/cartStatus";
import userStatus from "../../common/userStatus";

@observer
export default class OrderList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: []
        }
    }

    componentWillUnmount = () => {
        this.setState = (state, callback) => {
            return;
        };
    }

    componentDidMount() {
        this.load()
    }

    addToCart() {
        cartStatus.addToList({info: Object.assign(this.state.info), num: 1, id: this.state.info.id})
    }

    load() {
        const {route} = this.props
        const loading = Toast.loading('loading')
        const url = apiDomain + "/Index/getOrderList"
        postData(url, {
            userId: userStatus.userStatus.id,
            type: route.params.type
        }).then(res => {
            if (res.code === 200) {
                console.log('get list success', res.data)
                this.setState({
                    list: res.data
                })
            } else {
                Modal.alert('Error', res.msg, [
                    {text: 'OK'},
                ])
            }
        }).finally(() => {
            Toast.remove(loading)
        })
    }

    viewProduct(id) {
        this.props.navigation.navigate('viewProduct', {
            id: id
        })
    }

    toUploadPayment(id) {
        Modal.operation([
            {
                text: "Stripe",
                onPress: () => {
                    this.props.navigation.navigate('web', {
                        id: id,
                        type: "stripe"
                    })
                }
            },
            {
                text: "Bank",
                onPress: () => {
                    this.props.navigation.navigate('web', {
                        id: id,
                        type: "bank"
                    })
                }
            }
        ])
    }

    getInvoice(id) {
        Modal.prompt('Send Invoice', 'Please input email', [
            {
                text: 'Ok',
                onPress: (value) => {
                    this.sendInvoice(id, value)
                }
            },
            {
                text: 'Cancel'
            }
        ])
    }

    sendInvoice(id, email) {
        const loading = Toast.loading('loading')
        postData(apiDomain + "/Index/getInvoice", {
            id: id,
            email: email
        }).then(res => {
            if (res.code === 200) {
                Modal.alert('Success', "Send invoice success!", [
                    {text: 'OK'},
                ])
            } else {
                Modal.alert('Error', res.msg, [
                    {text: 'OK'},
                ])
            }
        }).finally(() => {
            Toast.remove(loading)
        })
    }

    getReceipt(id) {
        Modal.prompt('Send Receipt', 'Please input email', [
            {
                text: 'Ok',
                onPress: (value) => {
                    this.sendReceipt(id, value)
                }
            },
            {
                text: 'Cancel'
            }
        ])
    }

    sendReceipt(id, email) {
        const loading = Toast.loading('loading')
        postData(apiDomain + "/Index/getReceipt", {
            id: id,
            email: email
        }).then(res => {
            if (res.code === 200) {
                Modal.alert('Success', "Send receipt success!", [
                    {text: 'OK'},
                ])
            } else {
                Modal.alert('Error', res.msg, [
                    {text: 'OK'},
                ])
            }
        }).finally(() => {
            Toast.remove(loading)
        })
    }


    render() {
        return (
            <ScrollView
                style={styles.container}
                automaticallyAdjustContentInsets={false}
                showsHorizontalScrollIndicator={false}
                showsVerticalScrollIndicator={false}
            >
                {
                    this.state.list.map(item => {
                        return (
                            <View style={{
                                borderTopWidth: 1,
                                borderTopColor: 'rgb(216, 216, 216)',
                                borderBottomWidth: 1,
                                borderBottomColor: 'rgb(216, 216, 216)',
                                marginBottom: 20,
                                paddingLeft: 20,
                                paddingRight: 20,
                                paddingBottom: 20,
                                backgroundColor: '#fff'
                            }}>
                                <View style={{flexDirection: 'row',borderBottomColor: 'rgb(216, 216, 216)',
                                    borderBottomWidth: 1, paddingBottom: 10}}>
                                    {
                                        item.status === 'notPay' ? (
                                            <TouchableOpacity style={styles.cart}
                                                              onPress={() => this.toUploadPayment(item.id)}>
                                                <Text style={styles.cartText}>Upload payment</Text>
                                            </TouchableOpacity>
                                        ) : (
                                            <View style={{flexDirection: 'row'}}>
                                                <TouchableOpacity style={styles.cart}
                                                                  onPress={() => this.getInvoice(item.id)}>
                                                    <Text style={styles.cartText}>Send invoice</Text>
                                                </TouchableOpacity>
                                                <TouchableOpacity style={[styles.cart, {marginLeft: 10}]}
                                                                  onPress={() => this.getReceipt(item.id)}>
                                                    <Text style={styles.cartText}>Send receipt</Text>
                                                </TouchableOpacity>
                                            </View>
                                        )
                                    }
                                </View>
                                <View style={{
                                    paddingTop: 10,
                                    paddingBottom: 10,
                                    borderBottomColor: 'rgb(216, 216, 216)',
                                    borderBottomWidth: 1
                                }}>
                                    <View style={{
                                        flexDirection: 'row',
                                        justifyContent: 'space-between'
                                    }}>
                                        <Text style={{fontWeight: 'bold'}}>Order status</Text>
                                        <Text style={{fontWeight: 'bold'}}>{item.status === 'notPay' ? 'Wait to pay' : 'Done'}</Text>
                                    </View>
                                    <View style={{
                                        flexDirection: 'row',
                                        justifyContent: 'space-between',
                                        marginTop: 3,
                                        paddingTop: 10,
                                        paddingBottom: 10,
                                        borderBottomColor: 'rgb(216, 216, 216)',
                                        borderBottomWidth: 1
                                    }}>
                                        <Text style={{fontWeight: 'bold'}}>Delivery note</Text>
                                        <Text style={{fontWeight: 'bold'}}>{item.deliverNote}</Text>
                                    </View>
                                    <View style={{
                                        flexDirection: 'row',
                                        justifyContent: 'space-between',
                                        marginTop: 10
                                    }}>
                                        <Text>Sn </Text>
                                        <Text>{item.orderSn}</Text>
                                    </View>
                                    <View style={{
                                        flexDirection: 'row',
                                        justifyContent: 'space-between',
                                        marginTop: 10
                                    }}>
                                        <Text>Create time </Text>
                                        <Text>{item.createTime}</Text>
                                    </View>
                                    {
                                        item.payTime ? (
                                                <View style={{
                                                    flexDirection: 'row',
                                                    justifyContent: 'space-between',
                                                    marginTop: 10
                                                }}>
                                                    <Text>Pay time </Text>
                                                    <Text>{item.payTime}</Text>
                                                </View>
                                        ) : null
                                    }
                                    {
                                        item.maintenanceRecord ? (
                                                <View style={{
                                                    flexDirection: 'row',
                                                    justifyContent: 'space-between',
                                                    marginTop: 10
                                                }}>
                                                    <Text>Maintenance record </Text>
                                                    <Text>{item.maintenanceRecord}</Text>
                                                </View>
                                        ) : null
                                    }
                                </View>
                                {
                                    item.productInfo.map(p => {
                                        return (
                                            <TouchableOpacity style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-end', marginTop: 6}} key={p.info.id}
                                                              onPress={() => this.viewProduct(p.info.id)}>
                                                <Text style={styles.title}>{p.info.name}</Text>
                                                <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-end'}}>
                                                    <Text style={styles.price}>${p.info.salesPrice}</Text>
                                                    <Text style={{marginLeft: 10}}>x{p.num}</Text>
                                                </View>
                                            </TouchableOpacity>
                                        )
                                    })
                                }
                                <View style={{
                                    paddingTop: 10,
                                    paddingBottom: 10,
                                    borderTopColor: 'rgb(216, 216, 216)',
                                    borderTopWidth: 1,
                                    flexDirection: 'row',
                                    justifyContent: 'space-between', marginTop: 10
                                }}>
                                    <Text style={{marginTop: 3, fontWeight: 'bold', fontSize: 20}}>Total fee</Text>
                                    {
                                        item.promotionCode ?
                                            (
                                                <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-end'}}>
                                                    <Text style={{marginTop: 3, fontWeight: 'bold', fontSize: 20, textDecorationLine: 'line-through'}}>${item.total}</Text>
                                                    <Text style={{marginTop: 3, fontWeight: 'bold', fontSize: 20, marginLeft: 10}}>${item.promotionTotal}</Text>
                                                    <Text style={{marginLeft: 4}}>(-{item.promotion}%)</Text>
                                                </View>
                                            ) :
                                            (
                                                <Text style={{marginTop: 3, fontWeight: 'bold', fontSize: 20}}>${item.total}</Text>
                                            )
                                    }
                                </View>
                            </View>
                        )
                    })
                }

            </ScrollView>
        )
    }
}


const {width, height} = Dimensions.get('window');
const {screenWidth, screenHeight} = Dimensions.get('screen');

const styles = StyleSheet.create({
    provider: {
        width: screenWidth,
        height: screenHeight
    },
    container: {
        flex: 1,
        backgroundColor: 'rgb(242, 242, 242)',
        width: width,
        height: height
    },
    title: {
        fontSize: 20
    },
    content: {
        fontSize: 13,
        color: 'gray'
    },
    info: {
        flex: 1,
        flexDirection: 'column'
    },

    item: {
        flexDirection: 'row',
        flex: 1,
        paddingLeft: 20,
        paddingRight: 20,
        paddingTop: 10,
        paddingBottom: 10,
        marginTop: 10,
        borderRadius: 10,
        borderColor: '#f5f6f5',
        borderWidth: 1,
        justifyContent: 'space-between'
    },
    cover: {
        width: 80,
        height: 60
    },
    coverView: {
        // width: width * 0.3,
        // height: 60
        justifyContent: 'center'
    },
    mainTitle: {
        fontSize: 20,
        fontWeight: 'bold',
        paddingTop: 20
    },
    price: {
        fontSize: 18,
        marginTop: 5,
        fontWeight: 'bold'
    },
    cart: {
        width: 0.4 * width,
        backgroundColor: 'rgb(0, 21, 41)',
        paddingTop: 4,
        paddingBottom: 4,
        justifyContent: 'center',
        alignItems: 'center',
        textAlign: 'center',
        marginTop: 10,
        marginRight: 0
    },
    cartText: {
        color: '#ffe700',
        textAlign: 'center'
    },
});
